<template>
  <div id="admin-card">
    <el-card shadow="hover">
      <!-- 添加按钮 -->
      <div slot="header" class="clearfix">
        <el-button type="primary" @click="dialogFormVisible = true">添加身份</el-button>
      </div>

      <el-dialog :modal="false" title="添加身份" :visible.sync="dialogFormVisible">
          <el-form :model="addform" label-width="80px">
            <el-form-item label="姓名" label-width="30%">
              <el-input v-model="addform.nickname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="账号" label-width="30%">
              <el-input v-model="addform.account" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="电话" label-width="30%">
              <el-input v-model="addform.phone" autocomplete="off"></el-input>
            </el-form-item>
            <!-- <el-form-item label="管理员密码" label-width="30%">
              <el-input v-model="addform.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" label-width="30%">
              <el-input v-model="addform.confirmpassword" autocomplete="off"></el-input>
            </el-form-item> -->
            <el-form-item label="身份" label-width="30%">
              <el-select v-model="addform.user_role" placeholder="选择身份">
                <el-option label="超级管理员" value="1"></el-option>
                <el-option label="管理员" value="2"></el-option>
                <el-option label="普通用户" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addMan();dialogFormVisible = false">确 定</el-button>
          </div>
        </el-dialog>
      <!-- 查找表单 -->
      <el-input placeholder="请输入姓名或者账号" v-model="input2" class="input-with-select">
        <el-select
          style="width:100px;"
          class="el-select"
          v-model="select"
          slot="prepend"
          placeholder="请选择"
        >
          <el-option label="身份" value="1"></el-option>
          <el-option label="演示身份" value="2"></el-option>
        </el-select>
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
      <!-- 表格数据 -->
      <el-tabs @tab-click="changeTabs" v-model="activeStatus">
        <el-tab-pane v-for="(v) in adminListTabs" :refs="'changeTabs'+v.status" :key="v.status" :label="v.label" :name="v.status">
          <list-content :status="v.status"></list-content>
        </el-tab-pane>
      </el-tabs>
    <!-- 分页 -->
    <div class="page-break">
      <el-pagination
        background
        layout="prev, pager, next"
        @current-change="selectPage"
        :page-size="pageLen"
        :current-page="currentPage"
        :total="adminListTotal">
      </el-pagination>
    </div>
    </el-card>
  </div>
</template>

<script>
// 加载动画
import { Loading } from 'element-ui'
import ListContent from '@/components/system/listcontent'
import { mapMutations } from 'vuex'
export default {
  data() {
    return {
      prevStatus: null,// 定义一个上一status，如果点击的status面和上一status一样就不请求数据
      activeStatus: '5',
      adminListTotal: null,// 请求来的用户数据总共多少条
      pageLen: 10,// 每一页的条数
      currentPage:null,// 当前页码
      dialogFormVisible: false,
      adminListTabs:[
        {
          label: '所有账户',
          status: '5'
        },
        {
          label: '待激活',
          status: '0'
        },
        {
          label: '正常',
          status: '1'
        },
        {
          label: '已锁定',
          status: '2'
        },
        {
          label: '已停用',
          status: '3'
        },
        {
          label: '已注销',
          status: '4'
        }
      ],
      addform: {
        nickname: '',
        account: '',
        phone: '',
        user_role: '',
        status: '1'
        },
      input1: "",
      input2: "",
      select: ""
    }
  },
  methods: {
    ...mapMutations('user',[
      'changeBackstageTableList'
    ]),
    addMan () {
      // console.log(this.addform)
      this.$message({
        type: 'warning',
        message: '添加管理员'
      })
      this.$http.addMan(this.addform).then(res => {
        // console.log(res)
      },err => {
        console.log(err)
      })
    },
    loadingTabsList () {
      // 加载之后当前status赋值给上一个status
      this.prevStatus = this.activeStatus

      Loading.service();

      // 加载admin用户数据
      this.$http.getMan({ status: this.activeStatus, len:this.pageLen, page: this.currentPage }).then(res => {
        this.changeBackstageTableList(res.data.data)
        // console.log(res.data)
        // 请求时获取到
        this.adminListTotal = res.data.count
        Loading.service().close();
      })

    },
    // 每次切换status加载相应的数据
    changeTabs (e) {
      if( this.prevStatus !== this.activeStatus ){ // 如果上一个status和当前status不一样，就加载数据

        // 改变status时把页面改成第一页
        this.currentPage = 1
        this.loadingTabsList()
      }
    },
    // 点击第几页的事件
    selectPage (page) {
      // console.log('点击第'+page+'页了')
      this.currentPage = page
      this.loadingTabsList()
    }
  },
  // 初次进入页面加载数据
  created() {
    this.loadingTabsList()
  },
  components: {
    ListContent
  }
};
</script>

<style scoped lang="less"> 
#admin-card {
  transform: translateY(20px);
  width: 90%;
  margin: 0 5%;
}
.el-dialog{
  width:500px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

// 分页条样式
  .page-break{
    text-align: center;
    &>div{
      display: inline-block;
    }
  }
</style>